<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.bundle.min.js"></script>
    <style>
        .search-user{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <form>
        <div class="mb-3 mt-3">
            <label for="userId" class="form-label">用户编号:</label>
            <input type="text" class="form-control" id="userId" placeholder="输入用户id" name="userId">
        </div>
        <button type="button" class="btn btn-secondary sub-btn" onclick="getData()">
            <span></span>
            获取数据
        </button>
    </form>
</div>

<div class="container mt-3">
    <table class="table table-hover search-user">
        <thead>
        <tr>
            <th>编号</th>
            <th>账号</th>
            <th>密码</th>
            <th>昵称</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="4">信息为空</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function getData() {
        // 按钮加载动画
        $(".sub-btn>span").addClass("spinner-border spinner-border-sm");
        console.log("getData方法已被调用...");
        let userId = $("#userId").val();
        console.log("输入的值为:", userId);
        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            url: "/user/" + userId,
            dataType: "json",
            async: true,
            data: {},
            type: "GET",
            success: function (data) {
                console.log("data:", data)
                $(".search-user>tbody>tr").remove();
                if (data.code === 0) {
                    // 关闭加载动画
                    $(".sub-btn>span").removeClass("spinner-border spinner-border-sm");
                    // 数据显示
                    if (data.data != null) {
                        if(data.data.length>1){
                            for (let i = 0; i < data.data.length; i++) {
                                $(".search-user>tbody").append("<tr>" + "<td>" + data.data[i].id + "</td>" +
                                    "<td>" + data.data[i].username + "</td>" +
                                    "<td>" + data.data[i].password + "</td>" +
                                    "<td>" + data.data[i].nickName + "</td>" + "</tr>");
                                console.log("id...",data.data[i].id);
                            }
                        }else{
                            $(".search-user>tbody").append("<tr>" + "<td>" + data.data.id + "</td>" +
                                "<td>" + data.data.username + "</td>" +
                                "<td>" + data.data.password + "</td>" +
                                "<td>" + data.data.nickName + "</td>" + "</tr>");
                        }
                    } else {
                        $(".search-user>tbody").append("<tr><td colspan='4'>信息为空</td></tr>");
                    }
                }
            },
            error: function (err) {
                console.log("err:", err);
            }
        });
    }
</script>
</body>
</html>
